<template>
	<view>
		<uni-nav-bar fixed="true" @clickLeft="back" backgroundColor="#6869a8" height="120rpx" statusBar="true">
			<!-- 			<view style="font-size: 37rpx; margin: auto;">
				<text>群列表</text>
			</view> -->
			<view slot="left">
				<uni-icons type="back" size="30" color="#FFF"></uni-icons>
			</view>
		</uni-nav-bar>
		<view class="header">
			<u-row>
				<u-col span="3">
					<view>
						<u-avatar :src="group.avatar" size="110"></u-avatar>
					</view>
				</u-col>
				<u-col span=" 9">
					<view style="font-size: 40rpx;font-weight: bold;">{{group.groupName}}</view>
					<view style="font-size: 33rpx;color: #999e9f;">
						ID:{{group.id}}
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="div">
		</view>
		<view class="body">
			<view class="descr">
				群描述:
			</view>
			<view class="content">
				{{group.description}}
			</view>
		</view>
		<view class="div">
		</view>
		<view class="footer">
			<view class="" v-if="isJoin >-1">
				<view class="button delete width_30" hover-class="delete_hover" @click="isQuit = true" v-if="isJoin<2">
					退出群聊
				</view>
				<view class="button delete width_30" hover-class="delete_hover" @click="isDismiss = true"
					v-if="isJoin ===2">解散群聊
				</view>
				<view class="button send width_30" hover-class="send_hover" @click="send">发消息</view>
			</view>
			<view class="" v-else>
				<view class="button width_70 send" hover-class="send_hover" v-if="group.needVerify == 0" @click="join">
					加入</view>
				<view class="button width_70 send" hover-class="send_hover" v-if="group.needVerify == 1"
					@click="apply = true">申请加入</view>
			</view>
		</view>
		<u-modal :show="apply" title="群验证消息" width="500rpx" :showCancelButton="true" @cancel="apply = false"
			@confirm="applyGroup">
			<view>
				<u-input v-model="applyMessage" />
			</view>
		</u-modal>
		<u-modal :show="isQuit" title="温馨提示" content="请确认是否退出此群聊?" width="500rpx" :showCancelButton="true"
			@cancel="isQuit = false" @confirm="quit" confirmColor="#6869a8">
		</u-modal>
		<u-modal :show="isDismiss" title="温馨提示" content="请确认是否解散此群聊?" width="500rpx" :showCancelButton="true"
			@cancel="isDismiss = false" @confirm="dismiss" confirmColor="#6869a8">
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				group: {},
				isJoin: -1, //-1:未加入 0:普通成员 1:管理员(暂时没设置) 2:群主
				apply: false,
				isQuit: false,
				isDismiss: false,
				applyMessage: "我是" + this.$store.state.userInfo.username,
			}
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			quit() {
				this.$request.TokenRequest({
					url: "/group/quitGroup"
				}, {
					gid: this.group.id
				}).then(res => {
					if (res.state === 200) {
						uni.showToast({
							icon: "success",
							title: "退出成功!"
						})
						this.isQuit = false
						this.isJoin = -1
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			dismiss() {
				this.$request.TokenRequest({
					url: "/group/dismissGroup"
				}, {
					gid: this.group.id
				}).then(res => {
					if (res.state === 200) {
						uni.showToast({
							icon: "success",
							title: "解散成功!"
						})
						this.isDismiss = false
						uni.navigateBack({})
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			join() {
				this.$request.TokenRequest({
					url: "/group/addGroup"
				}, {
					gid: this.group.id,
					uid: this.$store.state.userInfo.id
				}).then(res => {
					if (res.state === 200) {
						uni.showToast({
							icon: "success",
							title: "加入成功!"
						})
						this.isJoin = 0
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			applyGroup() {
				this.$request.TokenRequest({
					url: "/group/requestToAdd"
				}, {
					uid: this.$store.state.userInfo.id,
					gid: this.group.id,
					message: this.applyMessage,
					isDeal: 0
				}).then(res => {
					if (res.state === 200) {
						this.apply = false
						uni.showToast({
							icon: "success",
							title: "申请发送成功!"
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			send() {
				uni.navigateTo({
					url: "../groupChat/groupChat?gid=" + this.group.id + "&groupName=" + this.group.groupName
				})
			}
		},
		onLoad(option) {
			let gid = option.gid
			this.$request.TokenRequest({
				url: "/group/getGroupInfo"
			}, {
				gid: gid
			}).then(res => {
				if (res.state === 200) {
					this.group = res.data
				} else {
					uni.showToast({
						icon: "none",
						title: res.message
					})
				}
			})
			this.$request.TokenRequest({
				url: "/group/isJoin"
			}, {
				gid: gid
			}).then(res => {
				if (res.state === 200) {
					this.isJoin = res.data
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 90%;
		margin: 40rpx auto;
	}

	.div {
		height: 20rpx;
		background-color: #F6F6F6;
	}

	.body {
		width: 90%;
		margin: 40rpx auto;

		.descr {
			font-size: 40rpx;
		}

		.content {
			font-size: 32rpx;
		}
	}

	.footer {
		// border-top: #858786 1px solid;
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;

		.width_30 {
			width: 30%;
		}

		.width_70 {
			width: 70%;
		}

		.button {
			font-size: 34rpx;
			margin: 18rpx 30rpx;
			padding: 20rpx 40rpx;
			display: inline-block;
			// sborder: #858786 1px solid;
			border-radius: 15rpx;
		}

		.delete {
			color: #FD5A75;
			background-color: #e2e2e2;
		}

		.delete_hover {
			background-color: #cccccc;
		}

		.send {
			border: none;
			color: #F5FFFF;
			background-color: #8b8de1;
		}

		.send_hover {
			background-color: #6869a8;
		}
	}
</style>
